<template>
  <div class="expert-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">{{ expert.name || '专家详情' }}</h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/portal/experts' }">专家团队</el-breadcrumb-item>
          <el-breadcrumb-item>{{ expert.name || '专家详情' }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <!-- 专家基本信息 -->
      <div class="expert-profile">
        <div class="expert-header">
          <div class="expert-avatar">
            <el-avatar :size="120" :src="expert.avatar" />
          </div>
          <div class="expert-basic-info">
            <h2 class="expert-name">
              {{ expert.name }}
              <span class="expert-title">{{ expert.title }}</span>
            </h2>
            <p class="expert-department">所在科室：{{ expert.department }}</p>
            <div class="expert-specialty">
              <span class="specialty-label">擅长：</span>
              <div class="specialty-tags">
                <el-tag
                  v-for="(specialty, index) in expert.specialties"
                  :key="index"
                  size="small"
                  effect="plain"
                >
                  {{ specialty }}
                </el-tag>
              </div>
            </div>
            <p class="expert-rating">
              <el-rate v-model="expert.rating" disabled text-color="#ff9900" />
              <span class="appointment-count">已预约：{{ expert.appointmentCount }}</span>
            </p>
          </div>
          <div class="expert-action">
            <el-button type="primary" size="large" @click="navigateToAppointment">
              预约挂号
            </el-button>
          </div>
        </div>
        
        <div class="expert-divider"></div>
        
        <!-- 专家详细介绍 -->
        <el-tabs v-model="activeTab" class="expert-tabs">
          <el-tab-pane label="专家简介" name="introduction">
            <div class="expert-introduction">
              <div class="introduction-section">
                <h3>个人简介</h3>
                <div class="section-content" v-html="expert.introduction"></div>
              </div>
              
              <div class="introduction-section">
                <h3>专业特长</h3>
                <div class="section-content">
                  <ul class="specialty-list">
                    <li v-for="(specialty, index) in expert.specialtyDetails" :key="index">
                      {{ specialty }}
                    </li>
                  </ul>
                </div>
              </div>
              
              <div class="introduction-section">
                <h3>学术成就</h3>
                <div class="section-content">
                  <p class="academic-info">{{ expert.academicInfo }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="出诊安排" name="schedule">
            <div class="schedule-container">
              <div class="schedule-header">
                <h3>门诊出诊安排</h3>
                <p class="schedule-note">*每日上午8:00-12:00，下午13:30-17:30</p>
              </div>
              
              <div class="week-schedule">
                <div class="schedule-day" v-for="(day, index) in weekDays" :key="index">
                  <div class="day-name" :class="{ 'current-day': isCurrentDay(index) }">
                    {{ day }}
                    <div class="day-date">{{ getDateForDay(index) }}</div>
                  </div>
                  <div class="time-slots">
                    <div 
                      class="time-slot morning" 
                      :class="{ 
                        'available': expert.schedule[index]?.morning?.available,
                        'unavailable': !expert.schedule[index]?.morning?.available
                      }"
                    >
                      <span class="slot-time">上午</span>
                      <span class="slot-status">
                        {{ expert.schedule[index]?.morning?.available ? 
                           `可预约(${expert.schedule[index]?.morning?.remaining})` : '休息' }}
                      </span>
                      <el-button 
                        v-if="expert.schedule[index]?.morning?.available" 
                        type="primary" 
                        size="small" 
                        @click="bookAppointment(index, 'morning')"
                      >
                        预约
                      </el-button>
                    </div>
                    <div 
                      class="time-slot afternoon"
                      :class="{ 
                        'available': expert.schedule[index]?.afternoon?.available,
                        'unavailable': !expert.schedule[index]?.afternoon?.available
                      }"
                    >
                      <span class="slot-time">下午</span>
                      <span class="slot-status">
                        {{ expert.schedule[index]?.afternoon?.available ? 
                           `可预约(${expert.schedule[index]?.afternoon?.remaining})` : '休息' }}
                      </span>
                      <el-button 
                        v-if="expert.schedule[index]?.afternoon?.available" 
                        type="primary" 
                        size="small" 
                        @click="bookAppointment(index, 'afternoon')"
                      >
                        预约
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="schedule-note-box">
                <el-alert
                  title="预约须知"
                  type="info"
                  :closable="false"
                >
                  <p>1. 预约挂号请至少提前1天，最多可预约7天内的号源</p>
                  <p>2. 预约成功后，请按时就诊，如需取消，请提前4小时取消预约</p>
                  <p>3. 就诊时请携带有效证件（身份证/医保卡）</p>
                </el-alert>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="患者评价" name="reviews">
            <div class="reviews-container">
              <div class="reviews-summary">
                <div class="rating-summary">
                  <div class="overall-rating">
                    <span class="rating-number">{{ expert.rating.toFixed(1) }}</span>
                    <el-rate v-model="expert.rating" disabled text-color="#ff9900" />
                  </div>
                  <div class="rating-details">
                    <div class="rating-item">
                      <span class="rating-label">专业水平</span>
                      <el-rate v-model="expert.ratingDetails.professional" disabled :max="5" />
                      <span class="rating-value">{{ expert.ratingDetails.professional.toFixed(1) }}</span>
                    </div>
                    <div class="rating-item">
                      <span class="rating-label">态度服务</span>
                      <el-rate v-model="expert.ratingDetails.attitude" disabled :max="5" />
                      <span class="rating-value">{{ expert.ratingDetails.attitude.toFixed(1) }}</span>
                    </div>
                    <div class="rating-item">
                      <span class="rating-label">就医环境</span>
                      <el-rate v-model="expert.ratingDetails.environment" disabled :max="5" />
                      <span class="rating-value">{{ expert.ratingDetails.environment.toFixed(1) }}</span>
                    </div>
                  </div>
                </div>
                <div class="reviews-tags">
                  <h4>患者印象</h4>
                  <div class="tags-container">
                    <el-tag 
                      v-for="tag in expert.reviewTags" 
                      :key="tag.name"
                      :type="tagType(tag.count)"
                      effect="light"
                      class="impression-tag"
                    >
                      {{ tag.name }} ({{ tag.count }})
                    </el-tag>
                  </div>
                </div>
              </div>
              
              <div class="reviews-list">
                <h3>患者评价 ({{ expert.reviews.length }})</h3>
                <div class="review-item" v-for="(review, index) in expert.reviews" :key="index">
                  <div class="review-header">
                    <span class="reviewer-name">{{ review.patientName }}</span>
                    <span class="review-date">{{ review.date }}</span>
                    <el-rate v-model="review.rating" disabled :max="5" />
                  </div>
                  <div class="review-content">
                    {{ review.content }}
                  </div>
                  <div class="expert-reply" v-if="review.reply">
                    <div class="reply-header">医生回复：</div>
                    <div class="reply-content">{{ review.reply }}</div>
                  </div>
                </div>
                
                <div class="load-more" v-if="expert.reviews.length > 0">
                  <el-button text>查看更多评价</el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeTab = ref('introduction')

// 一周的日期
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

// 获取当前日期对应的星期几(0-6)
const getCurrentDayIndex = () => {
  const today = new Date()
  // 获取星期几，JS中0是周日，1是周一，所以需要转换
  let day = today.getDay()
  // 转换为我们的格式（0是周一，6是周日）
  return day === 0 ? 6 : day - 1
}

// 判断是否是当前日期
const isCurrentDay = (index) => {
  return getCurrentDayIndex() === index
}

// 获取对应日期的字符串表示
const getDateForDay = (index) => {
  const today = new Date()
  const currentDayIndex = getCurrentDayIndex()
  
  // 计算日期差
  const diff = index - currentDayIndex
  
  // 创建新日期
  const date = new Date(today)
  date.setDate(today.getDate() + diff)
  
  // 格式化为月/日
  return `${date.getMonth() + 1}/${date.getDate()}`
}

// 获取标签类型
const tagType = (count) => {
  if (count > 20) return 'danger'
  if (count > 10) return 'warning'
  if (count > 5) return 'success'
  return 'info'
}

// 模拟专家数据
const expert = ref({
  id: Number(route.params.id) || 1,
  name: '张教授',
  title: '主任医师',
  department: '心血管内科',
  specialties: ['冠心病', '心力衰竭', '心律失常'],
  rating: 4.9,
  appointmentCount: 1563,
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  introduction: `<p>张教授，主任医师，教授，博士生导师，从事心血管疾病临床、教学、科研工作30余年。现任心血管内科主任，心血管疾病研究中心主任。</p>
  <p>1992年毕业于北京医科大学医学系，获医学博士学位。1995-1997年美国哈佛大学医学院心血管研究中心博士后研究。曾任中华医学会心血管病分会常委，中国医师协会心血管内科医师分会常委，中国生物医学工程学会心律分会常委。</p>`,
  specialtyDetails: [
    '擅长冠心病、心力衰竭、心律失常、高血压等心血管疾病的诊断和治疗',
    '精通心电图、动态心电图、超声心动图等检查的诊断与分析',
    '在复杂冠状动脉介入治疗方面具有丰富经验',
    '对心血管疾病的预防和康复治疗有独特见解'
  ],
  academicInfo: '作为第一作者和通讯作者在国内外核心期刊发表学术论文80余篇，其中SCI收录30余篇。主持国家级、省部级课题10余项。获得省部级科技进步奖3项。参与编写专著4部。',
  ratingDetails: {
    professional: 4.9,
    attitude: 4.8,
    environment: 4.7
  },
  reviewTags: [
    { name: '医术精湛', count: 28 },
    { name: '态度和蔼', count: 22 },
    { name: '解释详细', count: 19 },
    { name: '诊断准确', count: 16 },
    { name: '治疗有效', count: 14 },
    { name: '经验丰富', count: 12 },
    { name: '负责认真', count: 9 },
    { name: '等待时间短', count: 5 }
  ],
  reviews: [
    {
      patientName: '患者李**',
      date: '2023-12-15',
      rating: 5,
      content: '张教授非常专业，对我的冠心病做出了精准的诊断和治疗方案。跟着教授治疗半年了，现在病情稳定了很多，非常感谢！',
      reply: '谢谢您的信任，祝您健康！记得按时服药，保持良好的生活习惯。'
    },
    {
      patientName: '患者王**',
      date: '2023-11-28',
      rating: 5,
      content: '态度特别好，解释很详细，让我这个心脏病患者能够清楚了解自己的病情。最重要的是治疗效果显著，现在心悸症状基本消失了。',
      reply: null
    },
    {
      patientName: '患者张**',
      date: '2023-11-10',
      rating: 4,
      content: '张教授医术很好，态度也很亲切，就是挂号有点难。总体来说还是很满意的，病情有明显好转。',
      reply: '感谢您的评价，我们会努力改善挂号流程，给患者提供更好的就医体验。'
    },
    {
      patientName: '患者赵**',
      date: '2023-10-25',
      rating: 5,
      content: '慕名而来，确实名不虚传。张教授对我的心律失常做了详细的检查和分析，给出的治疗方案非常有效。医生的责任心和专业度都值得赞赏！',
      reply: null
    }
  ],
  schedule: [
    { // 周一
      morning: { available: true, remaining: 5 },
      afternoon: { available: false, remaining: 0 }
    },
    { // 周二
      morning: { available: false, remaining: 0 },
      afternoon: { available: true, remaining: 3 }
    },
    { // 周三
      morning: { available: true, remaining: 2 },
      afternoon: { available: true, remaining: 4 }
    },
    { // 周四
      morning: { available: false, remaining: 0 },
      afternoon: { available: false, remaining: 0 }
    },
    { // 周五
      morning: { available: true, remaining: 1 },
      afternoon: { available: false, remaining: 0 }
    },
    { // 周六
      morning: { available: true, remaining: 8 },
      afternoon: { available: false, remaining: 0 }
    },
    { // 周日
      morning: { available: false, remaining: 0 },
      afternoon: { available: false, remaining: 0 }
    }
  ]
})

// 导航到预约页面
const navigateToAppointment = () => {
  router.push({
    path: '/portal/patient/appointment',
    query: {
      doctorId: expert.value.id,
      doctorName: expert.value.name,
      departmentName: expert.value.department
    }
  })
}

// 预约特定时间段
const bookAppointment = (dayIndex, timeSlot) => {
  const day = weekDays[dayIndex]
  const dateStr = getDateForDay(dayIndex)
  
  router.push({
    path: '/portal/patient/appointment',
    query: {
      doctorId: expert.value.id,
      doctorName: expert.value.name,
      departmentName: expert.value.department,
      dateStr: `${dateStr} ${day}`,
      timeSlot: timeSlot === 'morning' ? '上午' : '下午'
    }
  })
}

// 生命周期钩子
onMounted(() => {
  // 实际项目中这里会根据路由参数请求专家详情
  const expertId = route.params.id
  console.log('加载专家ID:', expertId)
  
  // 在实际项目中，这里会调用API获取专家信息
  // fetchExpertDetail(expertId)
})
</script>

<style scoped>
.expert-detail-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  background-color: white;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.expert-header {
  display: flex;
  margin-bottom: 30px;
}

.expert-avatar {
  margin-right: 25px;
}

.expert-basic-info {
  flex: 1;
}

.expert-name {
  font-size: 24px;
  margin: 0 0 15px;
  color: #333;
}

.expert-title {
  font-size: 16px;
  color: #1989fa;
  margin-left: 10px;
  font-weight: normal;
}

.expert-department {
  color: #606266;
  margin: 5px 0 10px;
  font-size: 16px;
}

.expert-specialty {
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
}

.specialty-label {
  color: #606266;
  white-space: nowrap;
  margin-right: 10px;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expert-rating {
  margin: 15px 0 0;
}

.appointment-count {
  color: #909399;
  font-size: 14px;
  margin-left: 10px;
}

.expert-action {
  display: flex;
  align-items: flex-start;
  margin-left: 20px;
}

.expert-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 20px 0 30px;
}

.introduction-section {
  margin-bottom: 30px;
}

.introduction-section h3 {
  font-size: 18px;
  color: #333;
  margin: 0 0 15px;
  padding-left: 10px;
  border-left: 3px solid #1989fa;
}

.section-content {
  color: #606266;
  line-height: 1.8;
}

.specialty-list {
  padding-left: 20px;
  margin: 0;
}

.specialty-list li {
  margin-bottom: 10px;
}

.academic-info {
  padding: 15px;
  background: #f8f8f8;
  border-radius: 4px;
  color: #606266;
  line-height: 1.8;
}

.week-schedule {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 20px;
}

.schedule-day {
  min-width: 150px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.day-name {
  background: #f5f7fa;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

.current-day {
  background: #ecf5ff;
  color: #1989fa;
}

.day-date {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  font-weight: normal;
}

.time-slots {
  display: flex;
  flex-direction: column;
}

.time-slot {
  padding: 15px 10px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-slot:last-child {
  border-bottom: none;
}

.slot-time {
  font-weight: bold;
  margin-bottom: 8px;
}

.slot-status {
  color: #909399;
  font-size: 13px;
  margin-bottom: 10px;
}

.time-slot.available {
  background-color: #f0f9eb;
}

.time-slot.unavailable {
  background-color: #f4f4f5;
  color: #909399;
}

.schedule-note-box {
  margin-top: 30px;
}

.schedule-header {
  margin-bottom: 20px;
}

.schedule-header h3 {
  font-size: 18px;
  margin: 0 0 10px;
  text-align: center;
}

.schedule-note {
  text-align: center;
  color: #909399;
  margin: 0;
}

.reviews-container {
  padding: 10px 0;
}

.reviews-summary {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 20px;
}

.rating-summary {
  display: flex;
  align-items: center;
  flex: 1;
}

.overall-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 50px;
}

.rating-number {
  font-size: 42px;
  color: #ff9900;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
}

.rating-details {
  flex: 1;
}

.rating-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-label {
  width: 80px;
  color: #606266;
}

.rating-value {
  margin-left: 10px;
  color: #ff9900;
  font-weight: bold;
}

.reviews-tags {
  flex: 1;
}

.reviews-tags h4 {
  margin: 0 0 15px;
  color: #333;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.impression-tag {
  margin-bottom: 10px;
}

.reviews-list {
  padding: 10px 0;
}

.reviews-list h3 {
  margin: 0 0 20px;
  color: #333;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-name {
  font-weight: bold;
  margin-right: 15px;
}

.review-date {
  color: #909399;
  font-size: 14px;
  margin-right: 15px;
}

.review-content {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 10px;
}

.expert-reply {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  margin-top: 10px;
}

.reply-header {
  color: #1989fa;
  font-weight: bold;
  margin-bottom: 5px;
}

.reply-content {
  color: #606266;
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 992px) {
  .reviews-summary {
    flex-direction: column;
  }
  
  .rating-summary {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .expert-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .expert-avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .expert-specialty {
    flex-direction: column;
    align-items: center;
  }
  
  .specialty-label {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .expert-action {
    margin-left: 0;
    margin-top: 20px;
  }
  
  .rating-summary {
    flex-direction: column;
  }
  
  .overall-rating {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .main-content {
    padding: 20px 15px;
  }
  
  .review-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .reviewer-name {
    margin-bottom: 5px;
  }
  
  .review-date {
    margin-bottom: 5px;
  }
}
</style> 